﻿<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <meta charset="utf-8" />
    <meta name="referrer" content="never">

    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

    <title>JSON编辑器 NET牛人</title>

    <meta name="keywords" content="JSON编辑器 NET牛人" />
    <meta name="description" content="JSON编辑器 JSON格式化工具 JSON在线工具" />

    <style>
        html, body, div, ul, li {
            margin: 0;
            padding: 0;
            list-style: none;
            box-sizing: border-box;
            font-size: 16px !important;
        }

            .jsoneditor-popover, .jsoneditor-schema-error, div.jsoneditor td, div.jsoneditor textarea, div.jsoneditor th, div.jsoneditor-field, div.jsoneditor-value, pre.jsoneditor-preview {
                font-size: 16px !important;
            }

        .jvbox {
            position: absolute;
            width: 100%;
            height: 100%;
            border: 5px solid transparent;
        }

            .jvbox .td1 {
                width: 48%;
            }

            .jvbox .td2 {
                padding-top: 50px;
                vertical-align: top;
            }

            .jvbox .td3 {
                width: 48%;
            }

            .jvbox tr > td {
                position: relative;
                vertical-align: top;
                height: 100%;
            }

            .jvbox .td2 ul li {
                text-align: center;
                margin-bottom: 15px;
            }

                .jvbox .td2 ul li button {
                    outline: none;
                    cursor: pointer;
                    font-size: 1.2em;
                    padding: 5px 12px;
                    border: 1px solid #ddd;
                    background-color: #ffffff;
                }

                    .jvbox .td2 ul li button:hover {
                        border-color: #3883fa;
                    }

            .jvbox .json-editor > div {
                position: absolute;
            }

        .jsoneditor-poweredBy {
            display: none
        }
    </style>

</head>
<body>
    <table class="jvbox" cellpadding="0" cellspacing="0">
        <tr>
            <td class="td1 code-editor"></td>
            <td class="td2">
                <ul>
                    <li>
                        <button id="toTree" type="button" title="视图化">▶</button>
                        <button id="toCode" type="button" title="代码化">◀</button>
                    </li>
                    <li>
                        <button id="toSave" type="button" title="保存">✉</button>
                    </li>
                    <li>
                        <button id="toEscape1" type="button" title="转义双引号">\＋</button>
                        <button id="toEscape2" type="button" title="清理转义">\―</button>
                    </li>
                </ul>
            </td>
            <td class="td3 json-editor"></td>
        </tr>
    </table>

    <link href="https://cdn.jsdelivr.net/npm/jsoneditor@9.2.0/dist/jsoneditor.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/jsoneditor@9.2.0/dist/jsoneditor.min.js"></script>

    <script>
        //示例JSON
        var exampleJson = { array: [1, 2, 3], boolean: !0, color: "#82b92c", null: null, number: 123, object: { a: "b", c: "d", e: "f" }, string: "Hello World" };

        //初始化编辑器
        var codeEditor = new JSONEditor(document.querySelector(".code-editor"), {
            mode: 'code',
            onError: function (err) {
                alert(err.toString());
            },
            onChangeText: function (value) {
                tempSaveJson(value)
            }
        });
        var jsonEditor = new JSONEditor(document.querySelector(".json-editor"), {
            mode: 'tree',
            modes: ['code', 'form', 'text', 'tree', 'view'],
            onError: function (err) {
                alert(err.toString());
            }
        });

        var je = localStorage.getItem("JE");
        if (je && je != "") {
            codeEditor.setText(je);
        } else {
            codeEditor.set(exampleJson);
            jsonEditor.set(exampleJson);
        }

        function tempSaveJson(json) {
            localStorage.setItem("JE", json);
        }

        //视图化
        document.getElementById("toTree").onclick = function () {
            try {
                var code = codeEditor.get();
                if (code == "") {
                    alert("请输入JSON数据后再转换！");
                } else {
                    jsonEditor.set(code);
                }
            } catch (e) {
                alert("JSON数据有误！");
            }
        }

        //代码化
        document.getElementById("toCode").onclick = function () {
            try {
                var code = jsonEditor.get();
                codeEditor.set(code);
                tempSaveJson(code);
            } catch (e) {
                alert("JSON数据有误！");
            }
        }

        //保存
        document.getElementById("toSave").onclick = function () {
            try {
                var code = codeEditor.getText();
                var aTag = document.createElement('a');
                var blob = new Blob([code]);
                aTag.download = "code.json";
                aTag.href = URL.createObjectURL(blob);
                document.body.appendChild(aTag);
                aTag.click();
                URL.revokeObjectURL(blob);
            } catch (e) {
                alert("你的浏览器不支持！");
            }
        }

        //添加转义
        document.getElementById("toEscape1").onclick = function () {
            var code = codeEditor.getText();
            if (code == "") {
                alert("请输入JSON数据后再转换！");
            } else {
                codeEditor.setText(code.replace(/\"/g, '\\"'));
            }
        }

        //去除转义
        document.getElementById("toEscape2").onclick = function () {
            var code = codeEditor.getText();
            if (code == "") {
                alert("请输入JSON数据后再转换！");
            } else {
                codeEditor.setText(code.replace(/\\"/g, '"'));
            }
        }

        //拖拽
        var de = document.body;
        de.ondragleave = de.ondragenter = de.ondragover = function (e) {
            if (e && e.stopPropagation) { e.stopPropagation() } else { window.event.cancelBubble = true }
            if (e && e.preventDefault) { e.preventDefault() } else { window.event.returnValue = false }
        };
        de.ondrop = function (e) {
            if (e && e.preventDefault) { e.preventDefault() } else { window.event.returnValue = false }
            e = e || window.event;
            var files = (e.dataTransfer || e.originalEvent.dataTransfer).files;
            if (files && files.length) {
                var file = files[0];
                var reader = new FileReader();
                reader.onload = function (e) {
                    codeEditor.setText(e.target.result);
                };
                reader.readAsText(file);
            }
        }
    </script>
</body>
</html>